<template>
    <div id="app">
        <!-- 面包屑 -->
        <div id="breadcrumb_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item><span id="current">仓库管理</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card>
            <el-row>
                <el-col :span="19">
                    <span style="font-size: 16px; color: #2c9678; font-weight: 700;">
                        仓库新建/查询
                    </span>
                </el-col>
                <el-col :span="3">
                    <el-button icon="el-icon-plus" id="add" @click="warehouseAddDialog = true"
                        :disabled="!$store.state.current.isWarehouseManage">
                        新增仓库
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-search" id="search" @click="serch_warehouse()">
                        查询
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <span style="font-size: 15px">
                        仓库id：
                    </span>
                    <el-input v-model="inquire.warehouseId" placeholder="仅允许输入数字..." style="width: 350px"
                        onkeyup="value=value.replace(/[^\d]/g,'')" @keyup.enter.native="serch_warehouse()"></el-input>
                </el-col>
                <el-col :span="10">
                    <span style="font-size: 15px">
                        仓库名：
                    </span>
                    <el-input v-model="inquire.warehouseName" placeholder="请输入..." style="width: 300px"
                        @keyup.enter.native="serch_warehouse()"></el-input>
                </el-col>
            </el-row>
        </el-card>

        <el-card id="warehouses_list">
            <div class="warehouse" v-for="(item, index) in warehouse_list" :key="index">
                <el-row>
                    <i class="fa fa-home" aria-hidden="true" style="font-size: 100px"
                        @click="warehouse_detail(item)"></i>
                </el-row>
                <el-row>
                    id:{{ item.warehouseId }}
                </el-row>
                <el-row>
                    仓库名:{{ item.warehouseName }}
                </el-row>
                <el-row>
                    <el-button id="modify" size="small" icon="el-icon-s-tools"
                        v-if="$store.state.current.isWarehouseManage" @click="open_modify_dialog(item)">
                    </el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete"
                        v-if="$store.state.current.isWarehouseManage" @click="open_delete_dialog(item)">
                    </el-button>
                </el-row>
            </div>
        </el-card>

        <!-- 弹窗 -->
        <el-dialog title="新增仓库" :visible.sync="warehouseAddDialog">
            <el-form :model="warehouse">
                <el-form-item label="仓库名" :label-width="'180px'">
                    <el-input v-model="warehouse.warehouseName" autocomplete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="容量" :label-width="'180px'">
                    <el-input v-model="warehouse.capacity" autocomplete="off" style="width:400px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button id="cancel" @click="warehouseAddDialog = false">取 消</el-button>
                <el-button type="primary" id="add" @click="add_warehouse()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="warehouseDeleteDialog" width="30%">
            <span>确定删除该仓库？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="warehouseDeleteDialog = false">取 消</el-button>
                <el-button type="danger" @click="delete_warehouse()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改仓库" :visible.sync="warehouseModifyDialog">
            <el-form :model="warehouse">
                <el-form-item label="仓库名" :label-width="'180px'">
                    <el-input v-model="warehouse.warehouseName" autocomplete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="容量" :label-width="'180px'">
                    <el-input v-model="warehouse.capacity" autocomplete="off" style="width:400px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button id="cancel" @click="warehouseModifyDialog = false">取 消</el-button>
                <el-button type="primary" id="add" @click="modify_warehouse()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script src="../../assets/js/admin/warehouse.js">

</script>

<style scoped src="../../assets/css/admin/manage.css">
</style>